<template>
	<view class="box">
		<u-swiper :list="list" :height="598" indicator-pos="bottomRight" mode="number"></u-swiper>
		<view class="title">
			如云在野石榴酒微醺低度甜酒水果味高颜值系列新品体验
		</view>
		<view class="infobox">
			<text class="danwei">￥</text>
			<text class="price">142.0</text>
			<text class="delprice">￥290.1</text>
			<text class="ys">已售：2160</text>
			<text class="share">
				<image src="../../static/image/转发.png" mode=""></image><text>分享</text>
			</text>
		</view>
		<view class="hr"></view>
		<view class="ptrule">
			<text>拼团玩法</text>
			<view class="rule" @click="rule">
				<view class="">
					详细规则
				</view>
				<view class="angle"></view>
			</view>
		</view>
		<view class="ct">
			<text>参团</text>
			<view class="angle"></view>
			<text>系统组团</text>
			<view class="angle"></view>
			<text>抽取拼团成功用户</text>
			<view class="angle"></view>
			<text>成功发货失败退款</text>
		</view>
		<Basetitle name="规格选择"></Basetitle>
		<view class="guige">
			<view :class="index==current?'selectname':'name'" v-for="(item,index) in guigelist" :key="index"
				@click="xuanzhe(index)">
				{{item}}
			</view>
		</view>
		<Basetitle name="说明"></Basetitle>
		<view class="smbox">
			<view class="mdgz">
				<view class="letfbox">
					<text class="name">规则</text>
					<text class="guize">不可退</text>
				</view>
			</view>
			<view class="mdgz">
				<view class="letfbox">
					<text class="name">门店</text>
					<text class="guize">如云在夜集合店</text>
				</view>
				<view class="rightbox" @click="apply">
					<text class="name">2家店适用</text>
					<view class="angle"></view>
				</view>
			</view>
		</view>
		<view class="hrs"></view>
		<view class="ptrule">
			<text>宝贝评论(20)</text>
			<view class="rule" @click="bothremark">
				<view class="">
					查看全部
				</view>
				<view class="angle"></view>
			</view>
		</view>
		<view class="remarkbox">
			<BaseRemark></BaseRemark>
		</view>
		<view class="hrs"></view>
		<view class="dpifo" @click="store">
			<image src="../../static/logo.png" mode="" class="touxiang"></image>
			<view class="leftbox">
				<view class="name">
					如云在夜集合店
				</view>
				<view class="sitebox">
					<image src="../../static/地址.png" mode=""></image>
					<text>武侯区—红牌楼-7号</text>
					<image src="../../static/image/电话_37.png" mode=""></image>
					<text>15978541236</text>
				</view>
			</view>
		</view>
		<view class="hrs"></view>
		<view class="navbox">
			<view :class="current2==index?'selecname':'name'" v-for="(item,index) in navlist" :key="index"
				@click="nav(index)">
				{{item}}
			</view>
		</view>
		<view class="tcbox">
			<view class="titles">
				<text class="quan"></text>套餐内容
			</view>
			<view class="name">
				啤酒<text class="num">(3瓶)</text>
			</view>
		</view>

		<view class="twjs">
			——图文介绍——
		</view>
		<view class="hrs"></view>
		<view class="gmxzbox">
			<view class="titles">
				购买须知
			</view>
			<view class="contant">
				参考价：商品展示的划线价或参考价可能是品牌专柜价、
				商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、
			</view>
		</view>
		<view class="hrs"></view>
		<view class="gmxzbox">
			<view class="titles">
				购买须知
			</view>
			<view class="contant">
				参考价：商品展示的划线价或参考价可能是品牌专柜价、
				商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、
			</view>
		</view>
		<view class="hrs"></view>
		<view class="gmxzbox">
			<view class="titles">
				相似商品
			</view>
			<view class="" style="padding-top: 20rpx;box-sizing: border-box;">
				<Basesimilarity></Basesimilarity>
			</view>
		</view>
		<view class="" style="height: 80rpx;"></view>
		<!-- 底部导航 -->
		<Basebtnnav></Basebtnnav>
	</view>
</template>

<script>
	import Basetitle from "../../components/Basetitle/index.vue"
	import BaseRemark from "../../components/BaseRemark/index.vue"
	import Basesimilarity from "../../components/Basesimilarity/index.vue"
	import Basebtnnav from "../../components/Basebtnnav/index.vue"

	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
					}
				],
				guigelist: ["双人套餐", "三人套餐", "四人套餐", "六人套餐"],
				current: 0,
				navlist: ["套餐详情", "图文介绍", "购买须知", "评论"],
				current2: 0
			}
		},
		components: {
			Basetitle,
			BaseRemark,
			Basesimilarity,
			Basebtnnav
		},
		methods: {
			xuanzhe(v) {
				this.current = v
			},
			nav(v) {
				this.current2 = v
			},
			// 商店
			store() {
				this.jumpLink({
					link: "/pages/store/index"
				})
			},
			// 适用店铺
			apply() {
				this.jumpLink({
					link: "/pages/Apply_store/index"
				})
			},
			// 查看全部评论
			bothremark() {
				this.jumpLink({
					link: "/pages/bothremark/index"
				})
			},
			rule() {
				this.jumpLink({
					link: "/pagesB/group_rules/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #fff;

		.title {
			font-family: SourceHanSansCN-Medium;
			font-size: 30rpx;
			color: #333333;
			margin-top: 31rpx;
			line-height: 48rpx;
			padding-left: 31rpx;
			padding-right: 60rpx;
			box-sizing: border-box;
			font-weight: 700;
		}

		.infobox {
			padding-left: 31rpx;
			padding-right: 24rpx;
			box-sizing: border-box;

			.danwei {
				font-family: SourceHanSansCN-Medium;
				font-size: 24rpx;
				color: #f73f33;
			}

			.price {
				font-family: SourceHanSansCN-Bold;
				font-size: 50rpx;
				font-weight: normal;
				letter-spacing: 0rpx;
				color: #f73f33;
				font-weight: 700;
			}

			.delprice {
				font-family: SourceHanSansCN-Bold;
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0rpx;
				color: #666666;
				text-decoration: line-through;
				margin-left: 30rpx;
			}

			.ys {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #666666;
				margin-left: 80rpx;
			}

			.share {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #666666;
				margin-left: 50rpx;
				padding: 2rpx;
				box-sizing: border-box;
				// display: flex;
				// align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
				}

				text {
					height: 30rpx;
					line-height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}

		.hr {
			width: 100%;
			margin-top: 31rpx;
			background-color: #CCCCCC;
			height: 1rpx;
		}

		.ptrule {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 33rpx;
			box-sizing: border-box;

			text {
				font-family: SourceHanSansCN-Medium;
				font-size: 30rpx;
				color: #222222;
				font-weight: 700;
			}

			.rule {
				display: flex;
				align-items: center;
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #666666;


				.angle {
					width: 10rpx;
					height: 10rpx;
					border-top: 1px solid #000;
					border-left: 1px solid #000;
					transform: rotate(135deg)
				}
			}
		}

		.ct {
			display: flex;
			align-items: center;
			padding: 16rpx;
			box-sizing: border-box;

			text {
				font-family: MicrosoftYaHei;
				color: #333333;
				font-size: 24rpx;
				margin-left: 10rpx;
			}

			.angle {
				margin-left: 10rpx;
				width: 10rpx;
				height: 10rpx;
				border-top: 1px solid #000;
				border-left: 1px solid #000;
				transform: rotate(135deg)
			}
		}

		.guige {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 40rpx;
			margin-bottom: 40rpx;

			.name {
				width: 134rpx;
				height: 50rpx;
				background-color: #ffffff;
				border-radius: 25rpx;
				border: solid 1rpx #666666;
				text-align: center;
				line-height: 48rpx;
				font-family: SourceHanSansCN-Regular;
				font-size: 28rpx;
				color: #666;
			}

			.selectname {
				width: 134rpx;
				height: 50rpx;
				background-color: #ffffff;
				border-radius: 25rpx;
				border: solid 1rpx #f73f33;
				text-align: center;
				line-height: 48rpx;
				font-family: SourceHanSansCN-Regular;
				font-size: 28rpx;
				color: #f73f33;
			}
		}

		.smbox {
			padding: 33rpx;
			box-sizing: border-box;

			.mdgz {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.letfbox {
					line-height: 40rpx;

					.name {
						font-family: MicrosoftYaHei;
						font-size: 24rpx;
						color: #999999;
						margin-right: 20rpx;
					}

					.guize {
						font-family: MicrosoftYaHei;
						font-size: 24rpx;
						color: #333333;
					}
				}

				.rightbox {
					display: flex;
					align-items: center;

					.name {
						font-family: MicrosoftYaHei;
						font-size: 24rpx;
						color: #666666;
					}

					.angle {
						width: 10rpx;
						height: 10rpx;
						border-top: 1px solid #000;
						border-left: 1px solid #000;
						transform: rotate(135deg)
					}
				}
			}
		}

		.hrs {
			height: 10rpx;
			width: 100%;
			background-color: #F5F5F5;
		}

		.remarkbox {
			margin-left: 33rpx;
		}

		.dpifo {
			padding: 33rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.touxiang {
				width: 100rpx;
				height: 94rpx;
				border-radius: 10rpx;
			}

			.leftbox {
				margin-left: 15rpx;

				.name {
					font-family: SourceHanSansCN-Regular;
					font-size: 32rpx;
					color: #333333;
				}

				.sitebox {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					text {
						font-family: SourceHanSansCN-Regular;
						font-size: 22rpx;
						color: #999999;
						margin-left: 10rpx;
						margin-right: 20rpx;
					}

					image {
						width: 17rpx;
						height: 22rpx;
					}
				}
			}
		}

		.navbox {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #CCCCCC;

			.name {
				font-family: SourceHanSansCN-Medium;
				font-size: 30rpx;
				color: #222222;
				line-height: 60rpx;
				font-weight: 700;
			}

			.selecname {
				font-family: SourceHanSansCN-Medium;
				font-size: 30rpx;
				font-weight: 700;
				color: #f73f33;
				line-height: 60rpx;
				border-bottom: 2rpx solid #f73f33;
				;
			}
		}

		.tcbox {
			padding: 31rpx 40rpx 19rpx 40rpx;
			box-sizing: border-box;
			font-family: SourceHanSansCN-Regular;
			font-size: 28rpx;
			line-height: 53rpx;
			color: #222222;

			.num {
				font-family: SourceHanSansCN-Regular;
				font-size: 28rpx;
				color: #999999;
				margin-left: 10rpx;
			}
		}

		.twjs {
			font-family: SourceHanSansCN-Medium;
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			background-color: #F5F5F5;
			height: 77rpx;
			line-height: 77rpx;
		}

		.gmxzbox {
			padding: 25rpx;
			box-sizing: border-box;

			.titles {
				font-size: 30rpx;
				color: #222;
				font-weight: 700;
				font-family: SourceHanSansCN-Medium;
			}

			.contant {
				font-family: SourceHanSansCN-Regular;
				font-size: 26rpx;
				color: #444444;
				line-height: 44rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
